import { Form, Input, Button } from 'antd'
import { UploadImage } from '@/desktop/components/upload'
import type { LinkCardWord } from '@/services/common/definition'

export default function EditLinkCard(props: {
  word: LinkCardWord
  onSave: (item: LinkCardWord) => void
  onCancel: () => void
}) {
  const { word: initialWord, onSave, onCancel } = props

  const submit = useCallback(
    (values: Pick<LinkCardWord, 'title'>) => {
      onSave({ ...initialWord, ...values })
    },
    [initialWord, onSave],
  )

  return <Form initialValues={initialWord} labelCol={{ span: 4 }} onFinish={submit}>
    <main>
      <Form.Item label="卡片标题" name="title" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

      <Form.Item label="卡片描述" name="desc" rules={[{ required: true }]}>
        <Input.TextArea rows={3} maxLength={20} />
      </Form.Item>

      <Form.Item label="卡片链接" name="url" rules={[{ required: true }]}>
        <Input />
      </Form.Item>

      <Form.Item
        label="缩略图"
        name="image_url"
        rules={[{ required: true, message: '请上传缩略图' }]}
      >
        <UploadImage cdn={true} />
      </Form.Item>
    </main>
    <footer>
      <Form.Item noStyle wrapperCol={{ offset: 4 }}>
        <Button onClick={onCancel}>取消</Button>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Form.Item>
    </footer>
  </Form>
}
